<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>
        科讯管理后台
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/layuiadmin/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/layuiadmin/style/admin.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/iconfont.css}" media="all">
</head>
<body class="layui-layout-body">

<div id="LAY_app">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <!-- 头部区域 -->
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item layadmin-flexible" lay-unselect>
                    <a href="javascript:;" layadmin-event="flexible" title="侧边伸缩">
                        <i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i>
                    </a>
                </li>
                <li class="layui-nav-item layui-hide-xs" lay-unselect>
                    <a href="http://www.380.cn" target="_blank" title="前台">
                        <i class="layui-icon layui-icon-website"></i>
                    </a>
                </li>
                <li class="layui-nav-item" lay-unselect>
                    <a href="javascript:;" layadmin-event="refresh" title="刷新">
                        <i class="layui-icon layui-icon-refresh-3"></i>
                    </a>
                </li>
                <li class="layui-nav-item" lay-unselect>
                    <a href="javascript:;" layadmin-event="refresh" th:title="节点" th:text="${port}">

                    </a>
                </li>
            </ul>
            <ul class="layui-nav layui-layout-right" style="padding-right: 10px;" lay-filter="layadmin-layout-right">

                <li class="layui-nav-item" lay-unselect>
                    <a lay-href="app/message/index.html" layadmin-event="message" lay-text="消息中心">
                        <i class="layui-icon layui-icon-notice"></i>

                        <!-- 如果有新消息，则显示小圆点 -->
                        <span class="layui-badge-dot"></span>
                    </a>
                </li>

                <li class="layui-nav-item layui-hide-xs" lay-unselect>
                    <a href="javascript:;" layadmin-event="note">
                        <i class="layui-icon layui-icon-note"></i>
                    </a>
                </li>
                <li class="layui-nav-item layui-hide-xs" lay-unselect>
                    <a href="javascript:;" layadmin-event="fullscreen">
                        <i class="layui-icon layui-icon-screen-full"></i>
                    </a>
                </li>
                <li class="layui-nav-item" lay-unselect>
                    <a href="javascript:;">
                        <cite th:text="${nickName}"></cite>
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a lay-href="set/user/info.html">基本资料</a></dd>
                        <dd><a id="updatePassword">修改密码</a></dd>
                        <hr>
                        <dd style="text-align: center;">
                            <a href="logout">退出</a>
                        </dd>
                    </dl>
                </li>

            </ul>
        </div>

        <!-- 侧边菜单 -->
        <div class="layui-side layui-side-menu">
            <div class="layui-side-scroll">
                <div class="layui-logo">
                    <h3>科讯管理后台</h3>
                </div>

                <ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu"
                    lay-filter="layadmin-system-side-menu">
                    <li class="layui-nav-item layui-nav-itemed" th:each="m:${munu}">
                        <a th:if="${m.children==null or m.children.size()<=0}" th:attr="lay-href=${m.url}"
                           lay-direction="2">
                            <i class="layui-icon layui-icon-home" th:class="${'layui-icon iconfont '+m.icon}"></i>
                            <!--图标-->
                            <cite th:text="${m.menuName}"></cite>
                        </a>

                        <a th:if="${m.children!=null and m.children.size()>0}" href="javascript:;"
                           th:attr="lay-tips=${m.menuName}" lay-direction="2">
                            <i class="layui-icon iconfont layui-icon-home"
                               th:class="${'layui-icon iconfont '+m.icon}"></i><!--图标-->
                            <cite th:text="${m.menuName}"></cite>
                            <span th:id="${'menu-p-'+m.id}" class="layui-badge layui-hide">0</span>
                        </a>

                        <dl class="layui-nav-child" th:if="${m.children!=null and m.children.size()>0}">
                            <dd th:each="c:${m.children}">
                                <a th:if="${c.children!=null and c.children.size()>0}" th:text="${c.menuName}"></a>
                                <dl class="layui-nav-child" th:if="${c.children!=null and c.children.size()>0}">
                                    <dd th:each="cc:${c.children}">
                                        <a th:attr="lay-href=${cc.url}" th:text="${cc.menuName}"></a>
                                    </dd>
                                </dl>
                                <a th:if="${c.children==null ||c.children.size()<=0}" th:lay-text="${c.menuName}"
                                   th:attr="lay-href=${c.url}">
                                    <span th:text="${c.menuName}"></span>
                                    <span th:id="${'menu-'+c.id}" class="layui-badge layui-hide">0</span>
                                </a>
                            </dd>

                        </dl>
                    </li>

                </ul>
            </div>
        </div>

        <!-- 页面标签 -->
        <div class="layadmin-pagetabs" id="LAY_app_tabs">
            <div class="layui-icon layadmin-tabs-control layui-icon-prev" layadmin-event="leftPage"></div>
            <div class="layui-icon layadmin-tabs-control layui-icon-next" layadmin-event="rightPage"></div>
            <div class="layui-icon layadmin-tabs-control layui-icon-down">
                <ul class="layui-nav layadmin-tabs-select" lay-filter="layadmin-pagetabs-nav">
                    <li class="layui-nav-item" lay-unselect>
                        <a href="javascript:;"></a>
                        <dl class="layui-nav-child layui-anim-fadein">
                            <dd layadmin-event="closeThisTabs"><a href="javascript:;">关闭当前标签页</a></dd>
                            <dd layadmin-event="closeOtherTabs"><a href="javascript:;">关闭其它标签页</a></dd>
                            <dd layadmin-event="closeAllTabs"><a href="javascript:;">关闭全部标签页</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
            <div class="layui-tab" lay-unauto lay-allowClose="true" lay-filter="layadmin-layout-tabs">
                <ul class="layui-tab-title" id="LAY_app_tabsheader">
                    <li lay-id="home/console.html" lay-attr="home/console.html" class="layui-this"><i
                            class="layui-icon layui-icon-home"></i></li>
                </ul>
            </div>
        </div>


        <!-- 主体内容 -->
        <div class="layui-body" id="LAY_app_body">
            <div class="layadmin-tabsbody-item layui-show">
                <iframe th:src="@{welcome}" frameborder="0" class="layadmin-iframe"></iframe>
            </div>
        </div>

        <!-- 辅助元素，一般用于移动设备下遮罩 -->
        <div class="layadmin-body-shade" layadmin-event="shade"></div>
    </div>
</div>

<script th:src="@{/layuiadmin/layui/layui.js}"></script>
<script th:inline="javascript">
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use('index', function () {
        var $ = layui.jquery;
        var layer = layui.layer;

        $("#updatePassword").click(function () {
            layer.open({
                type: 2,
                title: '修改密码',
                content: 'updPassword',
                maxmin: true,
                area: ['550px', '550px'],
                btn: ['确定修改', '取消'],
                yes: function (index, layero) {
                    var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-edit");
                  console.log(submit)
                    submit.trigger('click');
                }
            });
        });


        var mp3 = new Audio("http://www.380.cn/static/7499.mp3");
        var mb = myBrowser();
        console.log(mb);
        if ("Chrome" != mb && "FF" != mb) {
            alert("请使用谷歌或者火狐浏览器!");
            window.close();
        }
        createSocket();
        var open = false;

        function createSocket() {
            if (typeof (WebSocket) == "undefined") {
                console.log("您的浏览器不支持WebSocket");
            }
            var user = [[${manageName}]];
            var socket = new WebSocket("ws://127.0.0.1:8082/messageServer/" + user);
            socket.onopen = function () {
                console.log("连接到服务器成功");
                open = true;
            }

            //收到消息事件
            socket.onmessage = function (msg) {
                var data = JSON.parse(msg.data);
                console.log(data);
                mp3.play();
                if (data.type == 1) {
                    layer.open({
                        type: 1
                        , offset: 'rb' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                        , content: '<div style="padding: 20px 100px;">' + data.content + '</div>'
                        , btn: '关闭'
                        , btnAlign: 'c' //按钮居中
                        , shade: 0 //不显示遮罩
                        , yes: function () {
                            layer.closeAll();
                        }
                    });
                } else {
                    layer.msg(data.content, {
                        time: 20000, //20s后自动关闭
                        btn: ['知道了']
                    });
                }


                //关闭事件
                socket.onclose = function () {
                    open = false;
                    console.log("websocket已关闭");
                    //重新连接服务器
                    if (!open) {
                        var index = setInterval(function getCount() {
                            console.log("重新连接");
                            createSocket();
                            if (open) {
                                clearInterval(index)
                            }
                        }, 5000);
                    }
                };

            }

        }

        function myBrowser() {
            var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
            var isOpera = userAgent.indexOf("Opera") > -1;
            if (isOpera) {
                return "Opera"
            }
            //判断是否Opera浏览器
            if (userAgent.indexOf("Firefox") > -1) {
                return "FF";
            } //判断是否Firefox浏览器
            if (userAgent.indexOf("Chrome") > -1) {
                return "Chrome";
            }
            if (userAgent.indexOf("Safari") > -1) {
                return "Safari";
            } //判断是否Safari浏览器
            if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
                return "IE";
            }
        }
    });
</script>
</body>
</html>
